<template>
    <div>
        <a-card title style="margin-bottom:10px">
            <div>
                <div @click="returnRoute">
                    <icon-arrow-left />
                    <b style="margin-left:5px" v-if="dataForm.lineType % 2 === 0" v-text="'公网线路故障'"></b>
                    <b style="margin-left:5px" v-else v-text="'专线线路故障'"></b>
                </div>
            </div>
        </a-card>
        <a-card :title="'更新线路信息'">
            <div class="form-wrapper" style="margin:20px 20% 0px 20%">
                <a-form :model="{}" :label-col-props="{ span: '3' }">
                    <a-form-item v-for="item of formItems" :key="item.key" :label="item.label">
                        <template v-if="item.key === 'lineNum'">
                            <a-input :placeholder="item.placeholder" v-model="dataForm.lineNum" />
                        </template>
                        <template v-if="item.key === 'aDevice'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.portMsg.aDevice"
                            />
                        </template>
                        <template v-if="item.key === 'zDevice'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.portMsg.zDevice"
                            />
                        </template>
                        <template v-if="item.key === 'aPort'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.portMsg.aPort"
                            />
                        </template>
                        <template v-if="item.key === 'zPort'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.portMsg.zPort"
                            />
                        </template>

                        <template v-if="item.key === 'lineName'">
                            <a-input :placeholder="item.placeholder" v-model="dataForm.lineName" />
                        </template>
                        <template v-if="item.key === 'lineType'">
                            <a-input :placeholder="item.placeholder" v-model="dataForm.lineType" />
                        </template>
                    </a-form-item>
                </a-form>
            </div>
            <div style="margin:100px 20% 0 20%;">
                <a-button style="margin-left: 70%;">取消</a-button>
                <a-button @click="submit" type="primary" style="margin-left: 30px;">提交</a-button>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts">
import dayjs from 'dayjs';
import { useRouter, useRoute } from "vue-router";
import { Message } from '@arco-design/web-vue'
import { defineComponent, ref, reactive, watch, onMounted } from 'vue'
export default defineComponent({
    name: 'BaseFormView',
    setup() {
        const router = useRouter();
        const route = useRoute();
        let formItems = reactive([
            {
                label: '线路编号',
                key: 'lineNum',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '线路名称',
                key: 'lineName',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '线路类型',
                key: 'lineType',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: 'A端设备',
                key: 'aDevice',
                type: 'select',
                placeholder: 'a端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: 'Z端设备',
                key: 'zDevice',
                type: 'select',
                placeholder: 'z端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: 'A端端口',
                key: 'aPort',
                type: 'select',
                placeholder: '端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: 'Z端端口',
                key: 'zPort',
                type: 'select',
                placeholder: '端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },



        ])
        let dataForm = {//更新完的数据
            //lineFault:ref(true)
        };
        // let dataForm = reactive({
        //     lineFault: true,
        //     linkNum: '',
        //     portMsg: '',
        //     faultTime: '',
        //     lightDecrease: false,
        //     responser: '',
        //     faultDescUrl: ''

        // })

        const getParams = () => {
            dataForm = reactive(JSON.parse(route.params.data))
            console.log('666')
            console.log(dataForm)

        }
        getParams()

        const submitLoading = ref(false)
        function submit() {
            //把dataform post 出去
           
        }

        function resetForm() {
            formItems.forEach((it) => {
                it.reset ? it.reset() : (it.value.value = '')
            })
        }
        function valideForm() {
            if (formItems.every((it) => (it.validator ? it.validator() : true))) {
                Message.success('所有表单都合法')
            }
        }
        function returnRoute() {
            router.go(-1)
        }
        //  onMounted(getParams)
        return {
            dataForm,
            formItems,
            submitLoading,
            submit,
            resetForm,
            valideForm,

            dayjs,

            getParams,


            returnRoute
        }
    },
})
</script>
